<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>博客园</title>
	<meta name="description" content="博客园">
	<meta name="keywords" content="博客园">
	<link rel="shortcut icon" href="./favicon.ico" />
	<link rel="stylesheet" href="./js/jquery-blinds-player/css/shutter.css">
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="js/pagination/pagination.css">
	<style>
		*{
			padding: 0;
			margin: 0;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		ul,li{
			list-style-type: none;
		}
		a{
			text-decoration: none;
			color: #000;
		}
		body{
			background-color: #f2f0ed;
		    color: rgb(51, 51, 51);
		    -webkit-font-smoothing: antialiased;
		    font: 14px/1.5 "Hiragino Sans GB", "Hiragino Sans GB W3", 微软雅黑;
		}
		/****************navbar****************/
		.navbar{
			position: relative;
			width: 100%;
			min-width: 1080px;
			height: 70px;
			/*border-bottom: 1px solid #ddd;*/
			background-color: #2f353b;
			z-index: 999;
		}
		.navbar-wrap{
			position: relative;
			width: 1080px;
			height: 70px;
			margin: auto;
			color: #fff;
		}
		.navbar-logo{
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 140px;
			height: 70px;
			background: url(./images/blog_logo.png) center no-repeat;
			background-size: 180px;
			vertical-align:middle;
		}
		.navbar-menu{
			padding-left: 140px;
			overflow: hidden;
		}
		.navbar-menu li{
			width: 88px;
			height: 70px;
			line-height: 70px;
			color: #a0aab9;
			vertical-align:middle;
			text-align: center;
			float: left;
		}
		.navbar-menu li a{
			display: block;
			width: 100%;
			height: 100%;
			color: #a0aab9;
		}
		.navbar-menu li a:hover{
			background-color: #000;
			color: #fff !important;
		}
		.navbar-active{
			background-color: #000;
			color: #fff !important;
		}
		.navbar-status{
			position: absolute;
			top: 0;
			right: 0;
			overflow: hidden;
		}
		.navbar-status li{
			width: 50px;
			height: 70px;
			line-height: 100px;
			color: #a0aab9;
			vertical-align:middle;
			text-align: center;
			float: left;
		}
		.navbar-status li a{
			display: block;
			width: 100%;
			height: 100%;
			color: #2cbbce;
			font-size: 14px;
		}
		.navbar-status li a:hover{
			/*background-color: #000;*/
			color: #fff !important;
		}
        .navbar-user-wrap{
        	position: absolute;
        	top: 0;
        	right: 0;
        	height: 100%;
        	display: flex;
        	justify-content: flex-start;
        	align-items: center;
        	overflow: hidden;
        }
        .navbar-user{
        	width: 220px;
        	height: 100%;
        	display: flex;
        	justify-content: flex-start;
        	align-items: center;
        	overflow: hidden;
        }
        .navbar-user img{
        	width: 50px;
        	height: 50px;
        	border-radius: 50%;
        	cursor: pointer;
        }
        .navbar-user span{
        	padding-left: 10px;
        	font-size: 14px;
        	color: #fff;
        	font-style: italic;
        	cursor: pointer;
        }
        .navbar-user span:hover{
        	color: #00bcd4;
        }
        .navbar-user-logout{
        	color: #f00;
        }

        /****************banner****************/
        .banner{
        	width: 100%;
        	min-width: 1080px;
        	height: 400px;
        }
        .shutter-btn{
        	display: none;
        }
        .main{
        	width: 1080px;
        	padding: 25px;
        	margin: 0 auto 20px;
        	border: 1px solid #ddd;
        	background-color: #fff;
        	overflow: hidden;
        }
        .main-left{
        	width: 700px;
        	/*border: 1px solid #ccc;*/
        	float: left;
        }
        .main-content{
        	margin-bottom: 30px;
        	overflow: hidden;
        }
        .main-right{
        	width: 290px;
        	float: right;
        }

		.main-item{
			margin-bottom: 12px;
		}
		.blog-title {
		    line-height: 50px;
		    border-bottom: 1px dashed #607d8b;
		}
		.blog-title h1 {
		    height: 50px;
		    font-weight: normal;
		    font-size: 25px;
		    font-family: '微软雅黑';
		}
		.title-link {
		    height: 40px;
		    display: block;
		    text-shadow: 1px 1px 1px #ccc;
		    color: #607d8b;
		    text-decoration: none;
		    outline: 0;
		    overflow: hidden;
		}
		.anim-link, .anim-link a {
		    transition: all linear 0.4s;
		}
        .anim-link:hover, .anim-link a:hover {
		    margin-left: 10px;
		}
		a:hover, a:active {
		    color: rgb(44, 161, 218);
		    text-decoration: none;
		}
		.title-link {
		    height: 40px;
		    display: block;
		    text-shadow: 1px 1px 1px #ccc;
		    overflow: hidden;
		}
		.anim-link, .anim-link a {
		    transition: all linear 0.4s;
		}
		.blog-info{
			padding: 10px 0 10px;
			overflow: hidden;
		}
		.title-info-list a {
		    float: left;
		    font-size: 12px;
		    line-height: 13px;
		    color: #aaa;
		    margin-right: 15px;
		    display: inline;
		    padding-left: 18px;
		    background-image: url(./images/design-icons.png);
		    background-repeat: no-repeat;
		    transition-duration: 0.3s;
		}
		.title-info-list a.title-cmt {
		    background-position: 0 -95px;
		}
		.title-info-list a.title-date {
		    background-position: 0 0;
		}
		.title-info-list a.title-clicks {
		    background-position: 0 -140px;
		}
		.title-info-list a.title-sort {
		    background-position: 0 -47px;
		}
		.title-info-list a.title-date:hover {
		    background-position: 0 -24px;
		}
		.title-info-list a.title-sort:hover {
		    background-position: 0 -71px;
		}
		.title-info-list a.title-clicks:hover {
		    background-position: 0 -161px;
		}
		.title-info-list a.title-cmt:hover {
		    background-position: 0 -119px;
		}
		.title-info-list a:hover {
		    color: #f60;
		}

		.blog-link{
			display: block;
			width: 100%;
			overflow: hidden;
		}
		.blog-link img{
			width: 100%;
		}
		.blog-text{
			padding: 5px 0;
			line-height: 22px;
			font-size: 16px;
		}
		.blog-show{
			text-align: right;
			font-size: 12px;
			color: #848484;
			cursor: pointer;
		}

		.main-search-head,
		.main-sort-head{
			padding: 10px 0;
			border-bottom: 1px dashed #ccc;
			font-size: 20px;
			color: #2b2b2b;
		}
		.main-search-content{
			padding: 10px 0;
		}
		#search{
			display: inline-block;
			width: 200px;
			height: 32px;
			padding: 0 8px;
			border: 1px solid #c7c7c7;
			border-radius: 5px;
			outline: none;
			line-height: 32px;
			text-align: left;
			color: #3a3a3a;
		}
		#search-btn{
			display: inline-block;
			padding: 0 8px;
			border-radius: 5px;
			line-height: 28px;
			outline: none;
		}
		.main-sort{
			margin-top: 30px;
		}
		.main-sort-content{
			padding: 10px 0;
			overflow: hidden;
		}
		.main-sort-bar{
			width: 50%;
			font-size: 14px;
			line-height: 26px;
			cursor: pointer;
			float: left;
		}
		#backToTop{
			position: fixed;
			bottom: 50px;
			right: 50px;
			width: 60px;
			height: 60px;
			border-radius: 5px;
			background: rgba(0,0,0,0.75);
			color: #fff;
			text-align: center;
			line-height: 60px;
			display: none;
		}
		.foot{
			width: 100%;
			min-width: 1080px;
			background: #2f353b;
		}
		.foot-link{
			width: 1080px;
			height: 100px;
			margin: auto;
			padding: 20px;
		}
		.foot-link p{
			margin-bottom: 10px;
			color: #a0aab9;
		}
		.foot-link-wrap a{
			margin-right: 20px;
			color: #a0aab9;
		}
		.foot-link-wrap a:hover{
			color: #00bcd4;
		}
		.foot-copyright{
			width: 100%;
			background: #272d32;
			text-align: center;
			line-height: 60px;
			font-size: 14px;
			color: #7b8088;
		}
	</style>
</head>
<body>
	<div class="navbar">
		<div class="navbar-wrap">
			<a class="navbar-logo" href="javascript:;"></a>
			<ul class="navbar-menu">
				<li><a class="navbar-active" href="#">首页</a></li>
				<li><a href="javascript:;">关于</a></li>
				<li><a href="javascript:;">个人资料</a></li>
				<li><a href="javascript:;">我的留言板</a></li>
			</ul>
			<!-- <ul class="navbar-status">
				<li><a href="javascript:;">登录</a></li>
				<li><a href="javascript:;">注册</a></li>
			</ul> -->
			<div class="navbar-user-wrap">
				<a class="navbar-user" href="javascript:;">
					<img src="images/avatar.jpg" alt="用户头像">
					<span>吃屎不忘拉屎人</span>
				</a>
				<a class="navbar-user-logout" href="javascript:;">退出</a>
			</div>
		</div>
	</div>
	<div class="banner">
		<div class="shutter">
			<div class="shutter-img">
			    <a href="#" data-shutter-title="Iron Man">
			      <img src="http://www.mrfront.com/wp-content/themes/mrfront/images/banner/slider-img-1.jpg" alt="#"></a>
			    <a href="#" data-shutter-title="Super Man">
			      <img src="http://www.mrfront.com/wp-content/themes/mrfront/images/banner/slider-img-2.jpg" alt="#"></a>
			    <a href="#" data-shutter-title="The your">
			      <img src="./js/jquery-blinds-player/images/shutter_2.jpg" alt="#"></a>
			    <a href="#" data-shutter-title="The Hulk">
			      <img src="http://www.mrfront.com/wp-content/themes/mrfront/images/banner/slider-img-3.png" alt="#"></a>
			</div>
			<ul class="shutter-btn">
			    <li class="prev"></li>
			    <li class="next"></li>
			</ul>
			<div class="shutter-desc">
			    <p>Iron Man</p>
			</div>
		</div>
	</div>
	<div class="main">
		<div class="main-left">
			<div class="main-content">
				<div class="main-item">
					<div class="blog-title">
						<h1><a title="那些个我们难寻的模型原型图！碉堡了！" class="title-link anim-link" href="/blog/60">那些个我们难寻的模型原型图！碉堡了！</a></h1>
					</div>
					<div class="blog-info">
						<div class="title-info-list clearfix">
							<a class="title-date" href="#">2014-10-30 17:06:10</a>
							<a class="title-sort" href="#">66</a>
							<a class="title-clicks" href="#">3490</a>
							<a class="title-cmt" href="#">5</a>
						</div>
					</div>
					<div class="blog-content">
						<a class="blog-link" href=""><img src="images/1405822333.jpg" alt=""></a>
						<div class="blog-text">
							是一种非规律性的变动，是重复的轻度变异，它是指事物之间在形状、色彩、从小、肌理诸方面有着不同的特征：它体现了在同一种追求变化的效果。
						</div>
						<div class="blog-show">阅读全文>></div>
					</div>
				</div>
				<div class="main-item">
					<div class="blog-title">
						<h1><a title="那些个我们难寻的模型原型图！碉堡了！" class="title-link anim-link" href="/blog/60">那些个我们难寻的模型原型图！碉堡了！</a></h1>
					</div>
					<div class="blog-info">
						<div class="title-info-list clearfix">
							<a class="title-date" href="#">2014-10-30 17:06:10</a>
							<a class="title-sort" href="#">66</a>
							<a class="title-clicks" href="#">3490</a>
							<a class="title-cmt" href="#">5</a>
						</div>
					</div>
					<div class="blog-content">
						<a class="blog-link" href=""><img src="images/1405822333.jpg" alt=""></a>
						<div class="blog-text">
							是一种非规律性的变动，是重复的轻度变异，它是指事物之间在形状、色彩、从小、肌理诸方面有着不同的特征：它体现了在同一种追求变化的效果。
						</div>
						<div class="blog-show">阅读全文>></div>
					</div>
				</div>
				<div class="main-item">
					<div class="blog-title">
						<h1><a title="那些个我们难寻的模型原型图！碉堡了！" class="title-link anim-link" href="/blog/60">那些个我们难寻的模型原型图！碉堡了！</a></h1>
					</div>
					<div class="blog-info">
						<div class="title-info-list clearfix">
							<a class="title-date" href="#">2014-10-30 17:06:10</a>
							<a class="title-sort" href="#">66</a>
							<a class="title-clicks" href="#">3490</a>
							<a class="title-cmt" href="#">5</a>
						</div>
					</div>
					<div class="blog-content">
						<a class="blog-link" href=""><img src="images/1405822333.jpg" alt=""></a>
						<div class="blog-text">
							是一种非规律性的变动，是重复的轻度变异，它是指事物之间在形状、色彩、从小、肌理诸方面有着不同的特征：它体现了在同一种追求变化的效果。
						</div>
						<div class="blog-show">阅读全文>></div>
					</div>
				</div>
				<div class="main-item">
					<div class="blog-title">
						<h1><a title="那些个我们难寻的模型原型图！碉堡了！" class="title-link anim-link" href="/blog/60">那些个我们难寻的模型原型图！碉堡了！</a></h1>
					</div>
					<div class="blog-info">
						<div class="title-info-list clearfix">
							<a class="title-date" href="#">2014-10-30 17:06:10</a>
							<a class="title-sort" href="#">66</a>
							<a class="title-clicks" href="#">3490</a>
							<a class="title-cmt" href="#">5</a>
						</div>
					</div>
					<div class="blog-content">
						<a class="blog-link" href=""><img src="images/1405822333.jpg" alt=""></a>
						<div class="blog-text">
							是一种非规律性的变动，是重复的轻度变异，它是指事物之间在形状、色彩、从小、肌理诸方面有着不同的特征：它体现了在同一种追求变化的效果。
						</div>
						<div class="blog-show">阅读全文>></div>
					</div>
				</div>
			</div>
			<div class="box m-style"></div>
		</div>
		<div class="main-right">
			<div class="main-search">
				<div class="main-search-head">搜索</div>
				<div class="main-search-content">
					<input type="text" placeholder="请输入关键词" id="search">
					<button id="search-btn">搜索</button>
				</div>
			</div>
			<div class="main-sort">
				<div class="main-sort-head">分类</div>
				<div class="main-sort-content">
					<div class="main-sort-bar">校园生活</div>
					<div class="main-sort-bar">实时新闻</div>
					<div class="main-sort-bar">人物风景</div>
					<div class="main-sort-bar">汽车展览</div>
				</div>
			</div>

		</div>
	</div>
	<div class="foot">
		<div class="foot-link">
			<p>友情链接：</p>
			<div class="foot-link-wrap">
				<a href="javascript:;">百度</a>
				<a href="javascript:;">淘宝</a>
			</div>
		</div>
		<div class="foot-copyright">© 2017 maladashu.com 苏ICP备1123045号-1</div>
	</div>
	<div id="backToTop"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>
	
	<script src="js/jquery-blinds-player/js/jquery.min.js"></script>
	<script src="js/jquery-blinds-player/js/shutter.js"></script>
	<script src="js/jquery-blinds-player/js/velocity.js"></script>
	<script src="js/pagination/jquery.pagination.js"></script>
	<script>
		$(function () {
			//设置幻灯片
			setBanner();
			//返回顶部
			goTop();
	        window.onscroll = function () {
	        	//设置栏目和返回顶部按钮
				setTopAndBack();
	        };

	        function setBanner(){
				$('.shutter').shutter({
					shutterW: '100%', // 容器宽度
					shutterH: '100%', // 容器高度
					isAutoPlay: true, // 是否自动播放
					playInterval: 3000, // 自动播放时间
					curDisplay: 3, // 当前显示页
					fullPage: false // 是否全屏展示
				});
				$(".banner").hover(function(){
					$(".shutter-btn").show();
				},function(){
					$(".shutter-btn").hide();
				})
	        }
        	function setTopAndBack(){
	            var top = document.documentElement.scrollTop || document.body.scrollTop;
	            if(top<=0){
	            	$(".navbar").css({"position":"relative","opacity":"1"});
	            	$("#backToTop").fadeOut();
	            }else if(top>0&&top<=100){
	            	$("#backToTop").fadeOut();
	            	$(".navbar").css({"position":"fixed","opacity":"0.8"});
	            }else{
	            	$("#backToTop").fadeIn();
	            	$(".navbar").css({"position":"fixed","opacity":"0.8"});
	            }
        	}
        	function goTop(){
	            $("#backToTop").on("click",function(){
	            	$("html,body").animate({scrollTop:0},500);
	            })
        	}
        	$('.box').pagination({
                mode: 'fixed',
                count: 3,
                totalData: 64,
                showData: 10,
                coping: true,
                homePage: '首页',
                endPage: '末页'
            });
		});
	</script>

</body>
</html>